<template>
  <div class='article-container'>
    <el-card>
      <!-- 顶部的筛选及新增按钮 -->
      <el-row>
        <!-- 左侧输入框和下拉菜单 -->
        <el-col :span="20">
          <el-form inline size="small" ref="form" label-width="80px" :model="searchForm">
            <el-form-item label="关键字">
              <el-input  placeholder="根据文章标题搜索" v-model.trim="searchForm.keyword"></el-input>
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="searchForm.state" placeholder="请选择">
                <el-option label="启用" value="1"></el-option>
                <el-option label="禁用" value="0"></el-option>
               </el-select>
            </el-form-item>
            <!-- 按钮 -->
            <el-form-item>
              <el-button @click.prevent="clearForm">清除</el-button>
              <el-button type="primary" @click="searchArticle">搜索</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <!-- 右侧新增按钮 -->
        <el-button @click="addArticle" style="float: right" size="small" type="success"><i class="el-icon-edit"></i> 新增技巧</el-button>
      </el-row>
      <!-- 颈部警告条 -->
         <el-alert
          :title=" `数据一共 ${total} 条`"
          type="info"
          show-icon>
          </el-alert>
        <!-- 主体内容的表格区域 -->
          <el-table v-loading="tableLoading"  :data="articleTable"  style="width: 100%">
            <el-table-column  type="index"  :index="indexHandle"  label="序号"  width="100">  </el-table-column>
            <el-table-column label="文章标题">
              <template #default="{row}">
                {{row.title}}<i v-if="row.videoURL" @click="starVideo(row.videoURL)" class="el-icon-film"></i>
              </template>
            </el-table-column>
            <el-table-column prop="visits"  label="阅读数"> </el-table-column>
            <el-table-column prop="username"  label="录入人"> </el-table-column>
            <el-table-column  label="录入时间">
              <template #default="{row}">
                {{row.createTime |handleTime}}
              </template>
            </el-table-column>
            <el-table-column label="状态">
               <template #default="{row}">{{row.state===0? '已禁用':'已启用'}}</template>
            </el-table-column>
            <el-table-column  label="操作">
            <template #default="{row}">
              <el-button type="text" @click="previewArtFn(row)">预览</el-button>
              <el-button @click="changeState(row)" type="text">{{row.state===1? '禁用':'启用'}}</el-button>
              <el-button :disabled="row.state===1" type="text" @click="editArticle(row)">修改</el-button>
              <el-button :disabled="row.state===1" type="text" @click="delArticle(row.id)">删除</el-button>
            </template>
            </el-table-column>
          </el-table>
        <!-- 表格下面的分页器 -->
         <el-pagination
          class="paginationArticle"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[1,3,5,10]"
          :page-size="pagesize"
          background
          layout=" prev, pager, next, sizes,jumper"
          :total="total">
    </el-pagination>
    <!-- 添加和修改的弹窗 -->
    <ArticleDialog @getArticleList="getArticleList" ref="articlesDialog" :showSrticleDialog.sync="showSrticleDialog"></ArticleDialog>
    <!-- 播放视频的窗口 -->
    <div v-if="showVideo">
      <div class="xBox" @click="showVideo = false"><i class="el-icon-close"></i></div>
      <div class="videoBox">
      <video :src="videoSrc" controls autoplay></video>
    </div>
    </div>
    <!-- 预览文章的窗口 -->
    <ArticlePreview ref="articlePreview" :previewDialog.sync="previewDialog"></ArticlePreview>
    </el-card>
  </div>
</template>

<script>
import { list, remove, changeState } from '@/api/hmmm/articles.js'
import ArticleDialog from '@/module-hmmm/components/articles-add'
import ArticlePreview from '@/module-hmmm/components/articles-preview'
import dayjs from 'dayjs'
export default {
  name: 'Article',
  components: { ArticleDialog, ArticlePreview },
  data () {
    return {
      searchForm: {
        keyword: '',
        state: ''
      }, // 筛选的表单
      articleTable: [], // 表格数据
      pagesize: 10, // 当前显示多页
      page: 1, // 当前页
      total: 0, // 数据总数
      tableLoading: false, // 表格的loading状态
      showSrticleDialog: false, // 展示编辑或添加的对话框
      videoSrc: '', // 视频的地址
      showVideo: false, // 播放视频的窗口控制
      previewDialog: false // 预览文章的控制
    }
  },
  methods: {
    // 清除筛选项
    clearForm () {
      this.searchForm = {
        keyword: '',
        state: ''
      }
      // 重置数据
      this.getArticleList()
    },
    // 根据筛选条件搜索文章
    searchArticle () {
      // 发请求前的判断-----1.1没有筛选条件
      console.log(this.searchForm.state.length)
      if (this.searchForm.keyword === '' && !this.searchForm.state.length) {
        return this.$message.error('请输入筛选条件')
      } else {
        // 1.2 有筛选条件
        this.page = 1
        this.getArticleList(this.searchForm)
      }
    },
    // 发送请求获取表格渲染的数据
    async getArticleList (form) {
      this.tableLoading = true
      // 如果是created中的调用渲染的话--->不传参数即只传递页数和页码
      // 如果不是create的调用很可能会携带查询参数
      const obj = {
        page: this.page,
        pagesize: this.pagesize,
        ...form
      }
      const { data } = await list(obj)
      console.log(data)
      this.articleTable = data.items
      this.total = data.counts
      this.tableLoading = false
    },
    // 分页器的两个函数
    handleSizeChange (val) {
      console.log(val)
      // 修改相关的page属性
      this.pagesize = val
      this.page = 1
      // 判断是否有筛选条件
      // 没有筛选条件
      if (this.searchForm.keyword === '' && !this.searchForm.state) {
        // 发送请求获取表格渲染的数据
        this.getArticleList()
        // 有筛选条件
      } else {
        this.getArticleList(this.searchForm)
      }
    },
    handleCurrentChange (val) {
      this.page = val
      // 判断是否有筛选条件
      // 没有筛选条件
      if (this.searchForm.keyword === '' && !this.searchForm.state) {
        // 发送请求获取表格渲染的数据
        this.getArticleList()
        // 有筛选条件
      } else {
        this.getArticleList(this.searchForm)
      }
    },
    // 处理序号分页后的渲染问题
    indexHandle (index) {
      return index + 1 + (this.page - 1) * this.pagesize
    },
    // 点击了添加文章的按钮--->打开弹窗
    addArticle () {
      this.showSrticleDialog = true
      this.$refs.articlesDialog.title = '新增文章'
    },
    // 点击了删除按钮-->删除功能
    delArticle (id) {
      this.$confirm('删除操作不可逆,您确定要继续么?', '温馨提示').then(async () => {
        console.log(id)
        const res = await remove(id)
        if (res.data.success) {
          this.$message.success('操作成功')
          // 如果当前的页码仅有一条数据--->让该页码数减一
          if (this.articleTable.length <= 1 && this.page > 1) {
            this.page--
          }
          this.getArticleList()
        } else {
          this.$message.error('操作失败')
        }
      }).catch(() => {})
    },
    // 点击了禁用启用按钮
    async changeState (row) {
      const state = row.state === 1 ? 0 : 1
      const res = await changeState({ id: row.id, state })
      if (res.data.success) {
        this.$message.success('操作成功')
        row.state = state
      } else {
        this.$message.error('操作失败')
      }
    },
    // 点击了播放视频的按钮
    starVideo (url) {
      // 打开视频播放弹层--赋值url
      this.videoSrc = url
      this.showVideo = true
    },
    // 点击了预览文章的按钮
    async previewArtFn (row) {
      this.previewDialog = true
      this.$refs.articlePreview.articleDetail = row
    },
    // 点击了修改的按钮
    editArticle (row) {
      this.showSrticleDialog = true
      this.$refs.articlesDialog.title = '编辑文章'
      this.$refs.articlesDialog.ruleForm = { ...row }
    }
  },
  created () {
    // 发送获取文章列表的请求
    this.getArticleList()
  },
  filters: {
    // 调整时间格式
    handleTime (val) {
      return dayjs(val).format('YYYY-MM-DD HH:mm:ss')
    }
  }
}
</script>

<style scoped lang='scss'>
.article-container{
  padding: 10px;
  .paginationArticle{
    float: right;
    margin: 20px;
  }
  .el-icon-film{
    color: blue;
    cursor: pointer;
  }
  .xBox{
    position: fixed;
    top: 5%;
    left: 50%;
    transform:translateX(-50%) ;
    z-index: 999;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: rgba(0,0,0,.5);
    display: flex;
    justify-content: center;
    align-items: center;
    i{
      color: #fff;
    }
  }
  .videoBox{
    width: 800px;
    height: 600px;
    position: fixed;
    top:20%;
    left: 50%;
    transform:translateX(-50%) ;
    video{
      width: 100%;
    }
  }
}
</style>
